<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <title>Style Box Demo</title>     
        <link href="../css/qs.css" rel="stylesheet" type="text/css"/> 
        <link href="../css/ui/button.css" rel="stylesheet" type="text/css"/> 
        <link href="../css/ui/stylebox.css" rel="stylesheet" type="text/css"/> 
        <link href="../theme/default/style.css" rel="stylesheet" type="text/css"/> 
        <style> 
            select{width:50px;height:20px;background:#fff;border: 1px solid #ccc;vertical-align: middle;}
                        
            .setting,.scorebar,.container{margin:10px;}
            .setting{padding:3px;background:#f0f0f0;border:1px solid #ccc;}
            .setting strong{font-weight:bold;margin:0 5px;}
            .setting .qs-ui-btn{vertical-align:middle;}
        </style>        
        <script type="text/javascript" src="../lib/jquery.js"></script> 
        <script type="text/javascript" src="../js/ui/styleBox.js"></script> 
    </head> 
    <body oncontextmenu="return false;"> 
    <div class="setting">
        <strong>Set Size:</strong>
        <select class="size">
            <option value="50">50</option>
            <option value="100" selected="selected">100</option>
            <option value="150">150</option>
            <option value="200">200</option>
            <option value="250">250</option>
        </select>
        <a href="#" class="qs-ui-btn reset">Reset</a>
    </div>
    <div class="scorebar">
        index: 
    </div>
        <div class="container" style = 'width:150px;height:150px;'></div> 
        <script> 
            var config={
                showHeader:true,
                clickable: true
            };
            var styleBox=new Util.styleBox($('.container'),config,{
                onCellCheck:function(cell,ctf){
                   $('.scorebar').text('index: '+ctf['index']);
                },
                onCellUnCheck:function(cell,ctf){
                    $('.scorebar').text('index: '+ctf['index']);
                },
                onReSet:function(ctf){
                    $('.scorebar').text('index: '+ctf['index']);
                }
            });
            $('.size').bind('change',function(){
                styleBox.reSize(this.value);
            });
            
            $('.reset').bind('click',function(){
                styleBox.reSet();
            });
        </script> 
    </body> 
</html>